/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {StyleSheet, Text, View, ListView, NetInfo, TouchableOpacity, StatusBar, Platform, TouchableHighlight, TouchableWithoutFeedback, Dimensions, Image} from 'react-native';

import Common from '../../component/common';

import LinearGradient from 'react-native-linear-gradient';

// import Swiper from 'react-native-swiper';

import Detail from './detail';

// import MoreProgram from './moreProgram';

// import NewsList from './newsList';

// import Article from './article';

const totalWidth = Dimensions.get('window').width;

// const STATUS_BAR_HEIGHT = StatusBar.currentHeight || 20;

export default class RankList extends Component {
  constructor(props) {
    super(props);
    var dsRank = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      open: false,
      height: 0,
      scrollToHeight: 0,
      isMore: 0,
      rankDataSource: dsRank,
    };
    this.rankList = [];
  }
  componentWillMount(){
    // this.news = [1,2,3,4,5,7,8,9];
    // this.setState({
    //     newsDataSource: this.state.newsDataSource.cloneWithRows(this.news),
    //   });
    // this.setState({isList: this.props.isList});
      this.rankList = this.props.data.resultList;
      this.setState({
        isMore: this.props.data.needMore,
        rankDataSource: this.state.rankDataSource.cloneWithRows(this.rankList)
      })
  }
  componentWillReceiveProps(nextProps) {
    // this.setState({isList: nextProps.isList});
    // if(nextProps.isList != this.props.isList){
        if(nextProps.data != this.props.data){
          this.rankList = nextProps.data.resultList;
          this.setState({
            isMore: nextProps.data.needMore,
            rankDataSource: this.state.rankDataSource.cloneWithRows(this.rankList)
          })
        }
    // }
  }
  componentDidMount(){
    // NetInfo.isConnected.addEventListener(
    //     'connectionChange',
    //     (isConnected) => {
    //       this.setState({isConnected});
    //     }
    // );
  }
  fetchMore = () => {
    let formData = new FormData();
    formData.append("type", this.props.data.type);
    formData.append("range", this.props.time);
    Common.fetchData("post", "/billboard/moreDetail", formData, (responseData) => {
      // console.log(responseData.entity);
      this.rankList = this.rankList.concat(responseData.entity.resultList);
      this.setState({
        isMore: 1,
        rankDataSource: this.state.rankDataSource.cloneWithRows(this.rankList)
      })
    },() => {
      console.log('error');
    },() => {
      console.log('error');
    });
  };
  updown = (data) =>{
    var updown = {};
    if(data > 0){
      updown.change = data;
      updown.color = '#ff4546';
      updown.icon = require('../../images/up.png');
    }else if(data < 0){
      updown.change = -data;
      updown.color = '#62d474';
      updown.icon = require('../../images/down.png');
      // updown.icon = require('../../images/up.png');
    }else{
      updown.change = "";
      updown.icon = require('../../images/still.png');
    }
    return updown;
  };
  listRow = (rowData,idx) => {
    var updown = this.updown(rowData.rankingChanged);
    return (
      <TouchableHighlight underlayColor="#fafafa" delayPressIn={100} onPress={() => Common.onForward(this,Detail,this.props.data.type,rowData.id,this.props.time)}>
        <View style={styles.listrow} >
          <View style={[styles.rank,styles.viewRow]}>
            {
              rowData.ranking == 1?<Image source={require('../../images/home/first.png')} />:null
            }
            {
              rowData.ranking == 2?<Image source={require('../../images/home/second.png')} />:null
            }
            {
              rowData.ranking == 3?<Image source={require('../../images/home/third.png')} />:null
            }
            {
              rowData.ranking == 1 || rowData.ranking == 2 || rowData.ranking == 3?null:<Text style={styles.rankIndex}>{rowData.ranking}</Text>
            }
            <View style={styles.rankChange}>
              <Image style={styles.updown} source={updown.icon} />
              <Text style={{color: updown.color}}>{updown.change}</Text>
            </View>
          </View>
          <View style={[styles.rank,styles.viewRow]}>
            <Text numberOfLines={1} style={[styles.head,styles.headList]}>{rowData.title}</Text>
          </View>
          <View style={[styles.rank,styles.viewRow]}>
            <Text numberOfLines={1} style={[styles.head,styles.headList]}>{rowData.source}</Text>
          </View>
          <View style={[styles.rank,styles.viewRow]}>
            <Text style={[styles.head,styles.headList]}>{rowData.indexNumber}</Text>
          </View>
        </View>
      </TouchableHighlight>
    )
  };
  render() {
      return (
          <View style={[styles.list]}>
            <View style={{marginVertical: 10}}>
              <View style={styles.listrow}>
                <View style={styles.viewRow}>
                  <Text style={styles.head}>排名</Text>
                </View>
                <View style={styles.viewRow}>
                  <Text style={styles.head}>名称</Text>
                </View>
                <View style={styles.viewRow}>
                  <Text style={styles.head}>媒体</Text>
                </View>
                <View style={styles.viewRow}>
                  <Text style={styles.head}>指数</Text>
                </View>
              </View>
              <ListView
                scrollEnabled={true}
                removeClippedSubviews={false}
                dataSource={this.state.rankDataSource}
                renderRow={this.listRow}
                enableEmptySections={true}
                showsVerticalScrollIndicator ={false}
              />
            </View>  
            {
              this.state.isMore == 0?
              <View>
                <LinearGradient start={{x: 0.0, y: 0.0}} end={{x: 1.0, y: 0}} colors={['rgba(214,214,214,0)','rgba(214,214,214,1)', 'rgba(214,214,214,0)']} style={styles.line}/>
                <TouchableHighlight underlayColor="#fafafa" delayPressIn={100} onPress={this.fetchMore} style={styles.showAllW}>
                  <View style={styles.showAll}>
                    <Text style={styles.showAllText}>查看更多</Text>
                    <Image style={styles.showAllIcon} source={require('../../images/open.png')} />
                  </View>
                </TouchableHighlight>
              </View>:null
            }
                      
          </View>
      )
  }
}

const styles = StyleSheet.create({
  typeRow: {
    flex: 1,
    backgroundColor: '#ffffff',
    paddingTop: totalWidth*0.03,
    marginBottom: 10
  },
  title: {
    flexDirection: 'row',
    marginBottom: 10,
    paddingHorizontal: totalWidth*0.035,
  },
  titleL: {
    flex: 15,
    flexDirection: 'row',
    alignItems: 'center'
  },
  icon: {
    width: 2,
    height: 2,
    borderRadius: 1,
    backgroundColor: '#ff4546',
  },
  text: {
    color: '#fe4646',
    fontSize: 15,
    marginLeft: 2,
    marginRight: 10,
  },
  drag: {
    justifyContent: 'flex-end'
  },
  three: {
    flex:1,
    flexDirection: 'row',
    paddingHorizontal: totalWidth*0.035,
    marginBottom: 10,
  },
  ranking: {
    position: 'absolute',
    top: -1,
    left: totalWidth*0.036,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'transparent',
    width: totalWidth*0.1,
    height: totalWidth*0.113,
    resizeMode: 'contain',
  },
  rankingL: {
    color: '#ffffff',
    fontSize: 8
  },
  rankingR: {
    color: '#ffffff',
    fontSize: 16
  },
  rankingone: {
    position: 'absolute',
    top: -1,
    left: totalWidth*0.036,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'transparent',
    width: totalWidth*0.067,
    height: totalWidth*0.076,
    resizeMode: 'contain'
  },
  rankingoneL: {
    color: '#ffffff',
    fontSize: 6
  },
  rankingoneR: {
    color: '#ffffff',
    fontSize: 10,
  },
  tips: {
    flex: 1,
    marginTop: totalWidth*0.3,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: "center",
    backgroundColor: '#ffffff',
    opacity: 0.8,
    paddingVertical: 3,
  },
  tipsT: {
    color: '#000000',
    fontSize: 12,
    maxWidth: totalWidth*0.25,
    marginLeft: totalWidth*0.01,
  },
  tipsNIC: {
    flexDirection: 'row',
    alignItems: 'center',
    marginRight: totalWidth*0.01,
  },
  tipsN: {
    color: '#ff4546',
    fontSize: 25,
    marginRight: 4,
  },
  tipsIC: {
    flexDirection: 'row',
    alignSelf: 'flex-end',
    alignItems: 'flex-end',
    marginBottom: totalWidth*0.008,
  },
  tipsI: {
    flexDirection: 'row',
    width: totalWidth*0.024,
    height: totalWidth*0.024,
    marginBottom: totalWidth*0.008,
    resizeMode: 'contain'
  },
  tipsC: {
    fontSize: 14,
    color: '#ff4546',
  },
  tipsone: {
    flex: 1,
    marginTop: totalWidth*0.12,
    justifyContent: 'space-between',
    flexDirection: 'row',
    alignItems: "center",
    backgroundColor: '#fff',
    opacity: 0.8,
  },
  tipsoneT: {
    color: '#000000',
    fontSize: 10,
    maxWidth: totalWidth*0.2,
    marginLeft: totalWidth*0.01,
  },
  tipsoneNIC: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'flex-end',
    marginRight: totalWidth*0.01,
  },
  tipsoneN: {
    color: '#ff4546',
    fontSize: 20,
  },
  tipsoneIC:{
    flexDirection: 'row',
    alignItems: 'flex-end',
    alignSelf: 'flex-end',
    justifyContent: 'center',
    marginBottom: totalWidth*0.006,
  },
  tipsoneI: {
    width: totalWidth*0.019,
    height: totalWidth*0.019,
    resizeMode: 'contain',
    marginBottom: totalWidth*0.006,
  },
  tipsoneC: {
    fontSize: 12,
    color: '#ff4546',
  },
  first: {
    flex: 4,
    height: totalWidth*8.7/21,
  },
  two: {
    flex: 3,
    marginHorizontal: totalWidth*0.024,
    justifyContent: 'space-between',
  },
  second: {
    height: totalWidth*0.19,
  },
  third: {
    height: totalWidth*0.19,
  },
  one: {
    flex: 1,
    justifyContent: 'space-between'
  },
  switch: {
    flex: 1,
    backgroundColor: '#f6f6f6',
    alignItems: 'center',
    justifyContent: 'center',
  },
  swBox: {
    alignItems: 'center',
  },
  swText: {
    color: '#9c9c9c',
    fontSize: 8,
  },
  swImg: {
    marginTop: 3,
  },
  list:{
    flex: 1,
    overflow: 'hidden'
  },
  viewRow: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  head: {
    fontSize: 15,
    color: '#343434',
    textAlign: 'center'
  },
  headList: {
    fontSize: 13,
    color: '#000000'
  },
  listrow: {
    flexDirection: 'row',
    paddingVertical: totalWidth*0.025,
    paddingHorizontal: totalWidth*0.035,
  },
  rank: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  rankIndex: {
    width: totalWidth*0.056,textAlign: 'center'
  },
  rankChange: {
    flexDirection: 'row',justifyContent: 'flex-end', alignItems: 'center', width: totalWidth*0.084
  },
  updown: {
    marginRight: totalWidth*0.01,
  },
  line: {width: totalWidth,height: 1},
  showAllW: {alignItems: 'center', justifyContent: 'center',height: totalWidth*0.08},
  showAll: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  showAllText: {
    fontSize: 11,color: '#bdbbbc',marginRight: 3
  },
  showAllIcon: {
    width: totalWidth*0.024,
    height: totalWidth*0.013,
    resizeMode: 'contain',
  }

});